<template>
  <div class="tem-container">
    <div>
      <el-button class="tem-back" type="primary" size="mini" @click="goBack">返回</el-button>
    </div>
    <div class="tem-testarea">
      <el-table :data="previewList" height="1000" style="width: 100%" ref="elTable" v-loading="!canLoadmore">
        <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column
          prop="tag"
          label="标签"
          width="100"
          :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.tag === '家' ? 'primary' : 'success'"
              disable-transitions
            >{{scope.row.tag}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      lastScrollTop: null,
      distance: 44,
      lineTopHeight: 0,
      lineBottomHeight: 0,
      canLoadmore: true,
      previewList: [],
      displayCount: 0,
      height: 0
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    initData() {
      // init all data
      this.height = this.$refs.elTable.$el.children[2].querySelectorAll('tr')[0].offsetHeight
      this._rowsInWindow = Math.ceil(this.$refs.elTable.$el.children[2].offsetHeight / this.height),
      this._above = this._rowsInWindow * 2,
      this._below = this._rowsInWindow,
      this._max = this._rowsInWindow * this.height
    },
    updateScrollBar () {
      var this_ = this
      let _scrollTop = this_.$refs.elTable.$el.children[2].scrollTop,
          _height = this_.$refs.elTable.$el.children[2].querySelectorAll('tr')[0].offsetHeight,
          _contentHeight = this_.$refs.elTable.$el.children[2].offsetHeight
      // Counts the number of rows on the current screen
      if (_scrollTop / this_.height - Math.floor(_scrollTop / this_.height) > 0.5) {
        this_.displayCount = Math.ceil(_scrollTop / this_.height)
      } else {
        this_.displayCount = Math.floor(_scrollTop / this_.height)
      }
      // if the maximum height is exceeded, reset the previewList
      if (this_.lastScrollTop === null || Math.abs(_scrollTop - this_.lastScrollTop) > this_._max) {
        this_.lastScrollTop = _scrollTop
      } else {
        if (this_.to === this_.tableData.length && _height - _scrollTop - _contentHeight < this_.distance) {
          this_.loadmore(this_.from, this_.to)
        }
        return
      }
      // get from and to count
      let _from = parseInt(_scrollTop / this_.height) - this_._above
      if (_from < 0) {
        _from = 0
      }
      let _to = _from + this_._above + this_._below + this_._rowsInWindow
      if (_to > this_.tableData.length) {
        _to = this_.tableData.length
      }
      this_.from = _from
      this_.to = _to
      console.log(_from, _to)
      // set top height and bottom height
      $(".el-table__body").css("padding-top", _from * this_.height + 'px')
      $(".el-table__body").css("padding-bottom", (this_.tableData.length - _to) * this_.height + 'px')
      this_.resetPreviewList(_from, _to)
      this_.$nextTick(() => {
        let _scrollTop = this_.$refs.elTable.$el.children[2].scrollTop,
          _height = this_.$refs.elTable.$el.children[2].querySelectorAll('tr')[0].offsetHeight,
          _contentHeight = this_.$refs.elTable.$el.children[2].offsetHeight
        if (_to === this_.tableData.length && _height - _scrollTop - _contentHeight < 0) {
          this_.loadmore(this_.from, this_.to)
        }
      })
      $(".el-table__body-wrapper").scroll(function () {
        this_.updateScrollBar()
      })
    },
    loadmore(from, to) {
      if (!this.canLoadmore) return
      this.canLoadmore = false
      // fetch mock
      setTimeout(() => {
        for (var i = 0; i< 200; i++) {
          let item = {
            date: new Date().getTime(),
            name: '王小虎' + i,
            address: "上海市普陀区金沙江路 151" + i + " 弄",
            tag: i%2 === 0 ? "公司": "家"
          }
          this.tableData.push(item)
        }
        let _from = from, _to = to + this._below
        this.resetPreviewList(_from, _to)
        this.lineBottomHeight = (this.tableData.length - _to) * this.height
        this.updateScrollBar()
        this.canLoadmore = true
      }, 2000)
    },
    resetPreviewList(from, to) {
      // reset previewList
      this.previewList = []
      for (; from < to; from++) {
          this.previewList.push(this.tableData[from])
      }
    }
  },
  updated(){
    this.initData()
    this.updateScrollBar()
  },
  mounted () {
  },
  created () {
    for (var i = 0; i< 50000; i++) {
      let item = {
        date: new Date().getTime(),
        name: '王小虎' + i,
        address: "上海市普陀区金沙江路 151" + i + " 弄",
        tag: i%2 === 0 ? "公司": "家"
      }
      this.tableData.push(item)
      i < 6 && this.previewList.push(item)
    }
  }
}
</script>
<style scoped>
.tem-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tem-back {
  float: left;
  margin: 0 0 10px 0;
}
.tem-testarea {
  width: calc(100% - 20px);
  height: calc(100% - 60px);
  background: #fff;
  box-shadow: 0 0 5px #ccc;
}
</style>